* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;

  .container {
    height: 100vh;
    width: 100vw;

    .bg {
      height: 100vh;
      width: 100vw;
      background-image: url(../img/bg.jpg);
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      flex-direction: column;

      .alcohol_warp {
        position: fixed;
        width: 100%;
        height: 100%;
        background: #163282;
        padding-top: 590px;
        z-index: 9;
      }

      .alcohol_icon {
        width: 627px;
        height: 404px;
        margin: 0 auto;
        animation: slideUp 1s linear 0s both;
      }

      .alcohol_icon img {
        width: 627px;
        height: 404px;
      }

      @keyframes slideUp {
        from {
          -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
          transform: translate3d(0, 0, 0) scale3d(1, 1, 1);

        }

        to {
          -webkit-transform: translate3d(0, -590px, 0) scale3d(1.2, 1.2, 1.2);
          transform: translate3d(0, -590px, 0) scale3d(1.2, 1.2, 1.2);
        }
      }

      .lower_icon {
        animation: slideout 1s linear 0s both;
      }

      .lower_icon img {
        width: 100%;
        height: 1511px;
      }

      @keyframes slideout {
        from {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);

        }

        to {
          -webkit-transform: translate3d(0, 1625px, 0);
          transform: translate3d(0, 1625px, 0);
        }
      }

      .lower_icon {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 321px;
      }

      .up_icon {
        position: relative;
        z-index: 100;
        animation: fadeOut 0.5s linear 0.5s both;
      }

      @keyframes fadeOut {
        from {
          opacity: 1;
        }

        to {
          opacity: 0;
        }
      }

      .up_icon img {
        width: 100%;
        height: 321px;
      }

      .jiu_icon {
        position: absolute;
        width: 280px;
        height: 289px;
        left: 50%;
        transform: translateX(-50%);
        top: 122px;
        z-index: 200;
        animation: fadeOut 0.5s linear 0s both;
      }

      .jiu_icon img {
        width: 280px;
        height: 289px;
      }

      .receive {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-sizing: border-box;
      }

      .receive {
        display: none;

        .receive__bg {
          position: relative;
          width: 100vw;
          height: 940px;
          margin-bottom: 5px;
          border-bottom: 10px solid #e1c275;

          .receive__nickName {
            font-size: 22px;
            color: #fff;
            position: absolute;
            left: 390px;
            top: 270px;
            width: 124px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
          }

          .receive__nickName1 {
            font-size: 22px;
            color: #fff;
            position: absolute;
            left: 220px;
            top: 285px;
            width: 124px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
          }

          .receive__bImg {
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 0;
          }

          .receive__avatar,
          .receive__avatar1 {
            position: absolute;
            top: 310px;
            right: 220px;
            width: 140px;
            height: 140px;
            box-sizing: border-box;
            padding: 8px;
            border-radius: 70px;
            background-color: rgba(255, 255, 255, 0.6);
            overflow: hidden;

            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }

          .receive__avatar1 {
            top: 325px;
            left: 220px;
          }

          .receive__txt {
            position: absolute;
            top: 1%;
            left: 50%;
            transform: translateX(-50%);

            .receive__time {
              width: 200px;
              height: 40px;
              margin: auto;
              padding: 5px;
              margin-bottom: 10px;
              line-height: 40px;
              font-size: 30px;
              color: #dbc8a4;
              border: 4px solid #dbc8a4;
              border-radius: 20px;
            }

            .receive__say {
              width: 430px;
              text-align: center;
              font-size: 35px;
              font-weight: 700;
              color: #dbc8a4;
              letter-spacing: 8px;
            }
          }

          .receive__metoo {
            position: absolute;
            top: 1%;
            right: 2%;
            width: 93px;
            height: 140px;
            background: url("../img/metoo.png") no-repeat;
            animation-duration: 0.4s; //动画持续时间
          }
        }

        .receive__bottom {
          width: 100vw;

          .yyhy {
            text-align: center;
            font-size: 24px;
            color: #fff;
            letter-spacing: 8px;
          }

          .receive__swiper {
            position: relative;
            width: 100vw;
            height: 60px;
            margin: 8px 0;

            .prev2 {
              position: absolute;
              top: 50%;
              left: 0;
              transform: translateY(-50%);
            }

            .next2 {
              position: absolute;
              top: 50%;
              right: 0;
              transform: translateY(-50%);
            }

            .swiper-container2 {
              width: 90%;
              height: 60px;
              margin: auto;
              overflow: hidden;

              .avatarImg {
                width: 60px !important;
                height: 60px;
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;

                img {
                  width: 60px;
                  height: 60px;
                  border-radius: 50%;
                }
              }
            }
          }

          .receive__item {
            display: flex;
            flex-direction: column;
            align-items: center;

            .receive__btn {
              width: 100vw;
              display: flex;
              justify-content: space-around;
              align-items: center;

              .receive__go,
              .refuse__go {
                animation-duration: 0.4s; //动画持续时间
              }
            }

            .receive__ownership {
              font-size: 18px;
              color: #fff;
              letter-spacing: 4px;
            }
          }
        }
      }

      .mask_share1 {
        width: 100vw;
        height: 100vh;
        background: url("../img/share1.png") no-repeat;
        background-size: 100% 100%;
        display: none;
        z-index: 1;
      }

      .mask_share2 {
        width: 100vw;
        height: 100vh;
        background: url("../img/share2.png") no-repeat;
        background-size: 100% 100%;
        display: none;
        z-index: 1;
      }
    }
  }
}